<script setup>
import { ref } from 'vue';
import mdTest from '../../../README.md?raw';


const str = ref('');
str.value = mdTest;

</script>

<template>
    <!-- <div class="app-wrapper">
        <el-card>
            <div class="table-container doc-table">
                <h2>主要框架/插件及其文档</h2>
                <table class="table">
                    <tr>
                        <th>框架/插件</th>
                        <th>文档</th>
                    </tr>
                    <tr>
                        <td>vue3（渐进式JavaScript框架）</td>
                        <td><a href="https://cn.vuejs.org/">https://cn.vuejs.org/</a></td>
                    </tr>
                    <tr>
                        <td>vite（前端构建工具）</td>
                        <td><a href="https://vitejs.cn/">https://vitejs.cn/</a></td>
                    </tr>
                    <tr>
                        <td>vue-router（路由管理）</td>
                        <td><a href="https://router.vuejs.org/zh/">https://router.vuejs.org/zh/</a></td>
                    </tr>

                    <tr>
                        <td>pinia（状态管理）</td>
                        <td><a href="https://pinia.vuejs.org/">https://pinia.vuejs.org/</a></td>
                    </tr>
                    <tr>
                        <td>pinia-plugin-persistedstate</td>
                        <td><a href="https://github.com/prazdevs/pinia-plugin-persistedstate">
                                https://github.com/prazdevs/pinia-plugin-persistedstate</a>
                        </td>
                    </tr>
                    <tr>
                        <td>element-plus（UI框架）</td>
                        <td><a href="https://element-plus.gitee.io/zh-CN/">https://element-plus.gitee.io/zh-CN/</a>
                        </td>
                    </tr>

                    <tr>
                        <td>@element-plus/icons-vue（图标库）</td>
                        <td><a
                                href="https://github.com/element-plus/element-plus-icons">https://github.com/element-plus/element-plus-icons</a>
                        </td>
                    </tr>

                    <tr>
                        <td>scss（css扩展语言）</td>
                        <td><a href="https://www.sass.hk/">https://www.sass.hk/</a>
                        </td>
                    </tr>

                    <tr>
                        <td>echarts（可视化图表库）</td>
                        <td><a
                                href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org/zh/index.html</a>
                        </td>
                    </tr>



                </table>
                <br>

                <p>

                    本系统 前端是采用Vite构建的Vue3项目

                </p>
            </div>

        </el-card>
    </div> -->

    <v-md-preview :text="str"></v-md-preview>

</template>

<style lang="scss" scoped>
.app-wrapper {
    margin: 2% 30px;

    .table-container {
        margin: 10px 20px;

        h2 {
            font-size: 30px;
        }

        .table {
            width: 100%;
            height: 100%;
            border: 1px solid #000;


            th {
                padding: 2px;
            }

            td {
                padding: 10px;
                border: 1px solid #000;
            }
        }
    }


}
</style>